32 6 React & Django 인증 심화 5 소셜 로그인(OAuth2) 연동하기 (Google, Facebook, Kakao) | ✅ 편저: 코담 운영자

🌐 React & Django 인증 심화 5 _ 소셜 로그인(OAuth2) 연동하기 (Google, Facebook, Kakao)

이번 포스트에서는 Django 백엔드와 React 프론트엔드에서 Google, Facebook, Kakao 소셜 로그인(OAuth2) 을 연동하는 방법을 다룹니다.

---

📌 개요

소셜 로그인은 사용자가 별도의 회원가입 없이 기존 소셜 계정(Google, Facebook, Kakao 등)으로 애플리케이션에 로그인할 수 있게 합니다. Django에서는 와, 그리고 `` 를 활용해 OAuth2 인증을 구현할 수 있습니다.

React 프론트엔드에서는 백엔드의 OAuth2 엔드포인트를 호출하여 인증을 처리합니다.

---

🔑 15️⃣ Django 소셜 로그인 설정

📁 패키지 설치

pip install dj-rest-auth django-allauth social-auth-app-django

---

📁 settings.py

INSTALLED_APPS 추가:

INSTALLED_APPS += [
    'dj_rest_auth',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.facebook',
    'allauth.socialaccount.providers.kakao',
]

Authentication Backends 설정:

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
)

SITE_ID 및 Redirect 설정:

SITE_ID = 1
LOGIN_REDIRECT_URL = '/'

Google OAuth2 Client 정보 등록:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'APP': {
            'client_id': 'GOOGLE_CLIENT_ID',
            'secret': 'GOOGLE_CLIENT_SECRET',
            'key': ''
        }
    },
    'facebook': {
        'APP': {
            'client_id': 'FACEBOOK_APP_ID',
            'secret': 'FACEBOOK_APP_SECRET',
            'key': ''
        }
    },
    'kakao': {
        'APP': {
            'client_id': 'KAKAO_REST_API_KEY',
            'secret': 'KAKAO_CLIENT_SECRET',
            'key': ''
        }
    },
}

---

📁 urls.py

from django.urls import path, include

urlpatterns += [
    path('auth/', include('dj_rest_auth.urls')),
    path('auth/social/', include('allauth.socialaccount.urls')),
]

---

🔄 16️⃣ React에서 소셜 로그인 처리

프론트엔드에서는 Django가 제공하는 소셜 로그인 URL에 리디렉션하도록 구현합니다.

📁 SocialLoginButton.js

import React from 'react';

const SocialLoginButton = ({ provider }) => {
  const handleLogin = () => {
    window.location.href = `http://localhost:8000/auth/social/login/${provider}/`;
  };

  return (
    <button onClick={handleLogin}>
      {provider} 계정으로 로그인
    </button>
  );
};

export default SocialLoginButton;

사용 예제:

<SocialLoginButton provider="google" />
<SocialLoginButton provider="facebook" />
<SocialLoginButton provider="kakao" />

---

🛠 추가 보안 고려사항

• HTTPS 적용: OAuth2 리다이렉션에는 HTTPS가 필수입니다.
• CORS 및 CSRF: 이전 포스트의 설정으로 쿠키와 CSRF 보호가 유지됩니다.
• 프론트엔드 리다이렉션 처리: 로그인 후 프론트엔드로 돌아올 수 있도록 백엔드의 callback URL 설정 필요.

---

✅ 마무리

이번 포스트에서는 Django와 React에서 Google, Facebook, Kakao 소셜 로그인을 연동하여 OAuth2 인증을 구현했습니다. 이를 통해 사용자에게 더 간편한 로그인 경험을 제공할 수 있습니다.

다음 포스트에서는 모바일 환경(React Native)에서 소셜 로그인 및 인증 처리를 이어서 다룹니다.